<template>
	<view>
		<up-form @submit.prevent="onSubmit">
			<template v-if="editUser.editName !== '性别'">
				<up-form-item :label="editUser.editName" borderBottom labelWidth="120rpx" style="padding-left: 30rpx">
					<up-input :placeholder="editUser.placeholder" v-model="editUser.currentValue" clearable></up-input>
				</up-form-item>
			</template>
			<template v-else>
				<!-- 选择框用于选择性别 -->
				<up-form-item @click="show = true" :label="editUser.editName" borderBottom labelWidth="120rpx"
					style="padding-left: 30rpx;">
					<up-input placeholder="请选择性别" v-model="editUser.sexName" disabled="true">
						<template #suffix>
							<up-icon name="arrow-right"></up-icon>
						</template>
					</up-input>
				</up-form-item>
			</template>
			<up-picker :show="show" :columns="columns" keyName="label" @cancel="show = false" @confirm="confirmSex">
			</up-picker>
			<view style="margin: 16px">
				<up-button round block type="primary" @click="onSubmit">
					提交
				</up-button>
			</view>
		</up-form>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	import myAxios from '@/plugins/myAxios'
	import {
		getCurrentUser
	} from '@/services/user'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	const show = ref(false)
	const editUser = ref({
		editKey: '',
		editName: '',
		currentValue: '',
		placeholder: ''
	})
	// 定义可选的性别选项
	const columns = reactive([
		[{
				label: '男',
				value: 0
			},
			{
				label: '女',
				value: 1
			}
		]
	])
	const confirmSex = e => {
		editUser.value.sexName = e.value[0].label
		editUser.value.currentValue = e.value[0].value
		show.value = false // 关闭选择框
	}
	// const columns = reactive([['中国', '美国', '日本']])
	// 获取页面参数
	onLoad(options => {
		editUser.value = {
			editKey: options.editKey || '',
			editName: options.editName || '',
			currentValue: options.currentValue &&
				options.currentValue !== 'undefined' &&
				options.currentValue != 'null' ?
				options.currentValue : '',
			placeholder: options.placeholder || ''
		}
		editUser.value.sexName =
			editUser.value.currentValue != null ?
			Number(editUser.value.currentValue) == 0 ?
			'男' :
			'女' :
			''
	})

	// 表单提交处理
	const onSubmit = async () => {
		try {
			const currentUser = await getCurrentUser()
			if (!currentUser) {
				uni.showToast({
					title: '用户未登录',
					icon: 'none',
					duration: 2000
				})
				return
			}
			console.log('用户信息:', currentUser)

			const res = await myAxios.post('/user/update', {
				id: currentUser.id,
				[editUser.value.editKey]: editUser.value.currentValue
			})

			console.log('修改信息:', res)
			if (res.code === 0 && res.data > 0) {
				uni.showToast({
					title: '修改成功',
					icon: 'success',
					duration: 2000
				})
				uni.navigateBack() // 返回上一页
			} else {
				uni.showToast({
					title: `修改失败: ${res.description || ''}`,
					icon: 'none',
					duration: 2000
				})
			}
		} catch (error) {
			console.error('请求失败:', error)
			uni.showToast({
				title: '请求失败，请稍后再试',
				icon: 'none',
				duration: 2000
			})
		}
	}
</script>

<style scoped>
	/* 样式调整 */
</style>